<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="700px" :defaultFullscreen="true">
    <a-row>
      <a-col :span="12">
        <BasicTable @register="registerTable" :rowSelection="rowSelectionForMch" />
      </a-col>
      <a-col :span="12" v-if="checkedMchKeys.length > 0">
        <BasicTable @register="registerMchAppTable" :rowSelection="rowSelectionForMchApp" />
      </a-col>
    </a-row>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from "vue"
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import { BasicTable, BasicColumn, FormSchema, useTable } from "/@/components/Table"
  import { bindFormSchema } from "../qrcode.data"

  import { render } from "/@/utils/common/renderUtils"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { listMchInfo, listMchApp } from "/@/api/pay"
  import { useI18n } from "/@/hooks/web/useI18n"

  const { t } = useI18n("")
  const { createMessage } = useMessage()
  const emit = defineEmits(["register", "success"])
  const title = ref("绑定商户")
  const checkedMchKeys = ref<any[]>([])
  const checkedMchAppKeys = ref<any[]>([])
  const mchInfoColumns: BasicColumn[] = [
    {
      title: t("商户名称"),
      dataIndex: "mchName",
      width: 130,
    },
    {
      title: t("商户号"),
      dataIndex: "mchNo",
      width: 130,
    },
    {
      title: "商户类型",
      width: 90,
      dataIndex: "type",
      customRender: ({ text }) => {
        let color = "cyan"
        if (text == "1") color = "blue"
        if (text == "2") color = "cyan"
        return render.renderTag(render.renderDict(text, "mch_type"), color)
      },
    },
  ]
  const mchAppColumns: BasicColumn[] = [
    {
      title: t("应用AppId"),
      dataIndex: "id",
      width: 150,
    },
    {
      title: t("应用名称"),
      dataIndex: "appName",
      width: 150,
    },
  ]

  const searchFormSchema: FormSchema[] = [
    {
      label: t("商户号"),
      field: "batchNo",
      component: "Input",
    },
    {
      label: t("商户名称"),
      field: "mchName",
      component: "Input",
    },
  ]

  const [registerTable, { reload }] = useTable({
    title: "商户列表",
    api: listMchInfo,
    columns: mchInfoColumns,
    bordered: false,
    beforeFetch: (params) => {
      return params
    },
    formConfig: {
      baseColProps: { lg: 8, md: 8 },
      labelWidth: 70,
      schemas: searchFormSchema,
      showResetButton: false,
    },
    showTableSetting: false,
    showIndexColumn: false,
    useSearchForm: true,
    pagination: true,
    canResize: false,
    rowKey: "mchNo",
  })

  const [registerMchAppTable, {}] = useTable({
    title: "应用列表",
    api: listMchApp,
    columns: mchAppColumns,
    bordered: false,
    beforeFetch: (params) => {
      params.mchNo = checkedMchKeys.value[0]
      return params
    },
    showTableSetting: false,
    showIndexColumn: false,
    useSearchForm: false,
    pagination: true,
    canResize: false,
    rowKey: "id",
  })

  const rowSelectionForMch: any = {
    type: "radio",
    columnWidth: 30,
    selectedRowKeys: checkedMchKeys,
    onChange: handleSelectMch,
  }

  const rowSelectionForMchApp: any = {
    type: "radio",
    columnWidth: 30,
    selectedRowKeys: checkedMchAppKeys,
    onChange: handleSelectMchApp,
  }

  function handleSelectMch(selectKeys: (string | number)[]) {
    checkedMchAppKeys.value = []
    checkedMchKeys.value = selectKeys
  }

  function handleSelectMchApp(selectKeys: (string | number)[]) {
    checkedMchAppKeys.value = selectKeys
  }

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false, loading: true })
    try {
    } finally {
      setModalProps({ loading: false })
    }
  })

  async function handleSubmit(v) {
    try {
      setModalProps({ confirmLoading: true })
      closeModal()
      if (checkedMchKeys.value.length == 0 || checkedMchAppKeys.value.length == 0) {
        return
      }
      emit("success", {
        mchNo: checkedMchKeys.value[0],
        appId: checkedMchAppKeys.value[0],
      })
    } finally {
      setModalProps({ confirmLoading: false })
    }
  }
</script>
